<script setup>
import { ref, reactive, onBeforeMount } from "vue";
import useGoodsStore from "../../store/goodsStore";
import Dialog from "./dialog.vue";

const goodsStore = useGoodsStore();
const dialogTitle = ref("");
const param = reactive({
  page: 1,
});
onBeforeMount(() => {
  // 获取商品数据
  //   goodsStore.getGoodsAction();
  // 获取总数
  //   goodsStore.getGoodsTotalAction();
  getData();
});

const dialog = ref(null);
const dialogInfo = ref({});
const tableData = ref([]);
const getData = async () => {};
//添加品牌
const addGoods = () => {
  dialogTitle.value = "添加品牌";
  dialog.value.reset();
  dialog.value.open();
};
//操作
const edit = async (item, index) => {
  //index 1是修改 2是删除
  if (index == 1) {
    dialogTitle.value = "修改品牌";
    dialog.value.open();
    dialogInfo.value = item;
  } else {
  }
  console.log(item);
};
</script>

<template>
  <el-card>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商城管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品品牌</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="right">
      <el-button @click="addGoods" type="primary">新增品牌</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="brand_name" label="品牌名称" width="180" />
      <el-table-column prop="brand_url" label="品牌官网" width="180" />
      <el-table-column prop="brand_img" label="品牌图片" />
      <el-table-column prop="brand_desc" label="品牌描述" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="default" @click="edit(scope.row, 1)"
            >修改</el-button
          >
          <el-button type="primary" size="default" @click="edit(scope.row, 2)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="goodsStore.total"
      :current-page="goodsStore.page"
      :page-size="goodsStore.size"
      :page-sizes="[1, 3, 5, 10, 20, 50, 100]"
      @size-change="changeSize"
      @current-change="changePage"
    /> -->
  </el-card>
  <!-- 对话框 -->
  <Dialog
    ref="dialog"
    :dialogTitle="dialogTitle"
    :dialogInfo="dialogInfo"
    @getData="getData"
  />
</template>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.el-pagination {
  margin: 20px auto;
}
</style>
